<template>
	<view class="base-content">
		<view class="nav-kong"></view>
		<view class="nav">
			<image src="@/static/img/base/back.png" alt="" class="back" @tap="backHandle">
			<text>基地预约</text>
			<image src="@/static/img/base/search.png" alt="" class="search">
		</view>
		<view class="screening">
			<u-dropdown title-size="24rpx" menu-icon-size="24rpx" duration="300">
				<u-dropdown-item v-model="value1" title="基地类型" :options="options1"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="周五丨09-06" :options="options2"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="综合排序" :options="options3"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="site-content">
			<view class="site-list-row" v-for="(item,index) in siteList" :key="index">
				<view class="site-img" :style="`background-image:url(${item.trainingBaseCover})`," >
					<view class="grade">{{Number(item.grade).toFixed(1)}}</view>
				</view>
				<view class="site-location">
					<text class="location-text">{{item.name}}</text>
					<view class="positioning">
						<!-- <text>{{item.trainingBaseDetail}}</text> -->
						<text>身上泼饭马上屁哦公交决赛哦讲噶是否</text>
						<text>详情</text>
					</view>
					<view class="detail-btn-row">
						<view class="residue">
							<image src="@/static/img/base/movie2.png" alt="">
							<text>余:{{item.remain}}</text>
						</view>
						<view class="price">
							<text>¥ {{Number(item.unitPrice).toFixed(1)}}/小时</text>
						</view>
						<view>
							<u-button @click="detailHandle(item.id)" type="default" shape="circle" class="detail-btn" hover-class="none">预约</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { API } from '../../config/myApi.js';
	export default {
		data() {
			return {
				siteList: [],
				screenShow:false,
				value1: 1,
				value2: 2,
				value3: 3,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
				options3: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
			}
		},
		onLoad(){
			this.getBase()
		},
		methods: {
			//获取基地列表
			getBase(data){
				const pram = {
					  page: 1,
					  rows: 10,
				}
				API.getSite(pram).then(res=> {
					if(res.code) {
						if (res.code == 200) {
							this.siteList = res.result.records;
							console.log('基地列表',res.result);
						}
					}
				})
			},
			backHandle() {
				uni.navigateBack()
			},
			detailHandle(id){
				console.log(id);
				uni.navigateTo({
					url:`/pages/base/detail?id=${id}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.base-content {
		background: #F5F5F5;
		overflow: hidden;

		.nav-kong {
			width: 100vw;
			height: 270rpx;
		}

		.nav {
			height: 168rpx;
			width: 100vw;
			background: #fff;
			position: fixed;
			display: flex;
			justify-content: center;
			align-items: center;
			top: 0;
			left: 0;
			z-index: 1000;

			.back {
				width: 19rpx;
				height: 34rpx;
				position: absolute;
				top: 50%;
				left: 35rpx;
				transform: translateY(-50%);
			}

			>text {
				font-size: 36rpx;
				color: #333333;
				font-weight: bold;
			}

			.search {
				width: 37rpx;
				height: 36rpx;
				position: absolute;
				top: 50%;
				right: 30rpx;
				transform: translateY(-50%);
			}
		}

		.screening {
			width: 100vw;
			height: 100rpx;
			background: #fff;
			position: fixed;
			top: 152rpx;
			left: 0rpx;
			// z-index: 1000;

			/deep/.u-dropdown {
				padding: 0rpx 30rpx;
				margin-top: 22rpx;
				display: flex;
			}

			/deep/.u-dropdown__menu__item {
				width: 210rpx;
				height: 58rpx;
				background: #F6F6F6;
				border-radius: 12rpx;
				box-sizing: border-box;
				flex: none;
			}

			/deep/.u-dropdown__menu {
				width: 100%;
				display: flex;
				justify-content: space-between;
			}
		}

		.site-content {
			padding: 0rpx 30rpx;
			position: relative;
			z-index: 10;
			.site-list-row {
				padding: 19rpx 32rpx 23rpx 20rpx;
				background: #fff;
				border-radius: 14rpx;
				margin-top: 26rpx;
				display: flex;

				.site-img {
					width: 240rpx;
					height: 190rpx;
					border: 1rpx solid red;
					border-radius: 6rpx;
					position: relative;
					
					.grade {
						width: 83rpx;
						height: 30rpx;
						position: absolute;
						top: 0;
						left: 0;
						font-size: 20rpx;
						color: #fff;
						background-color: rgba(0, 0, 0, .3);
						text-align: center;
						border-bottom-right-radius: 20rpx;
					}
				}

				.site-location {
					margin-left: 21rpx;
					display: flex;
					flex-direction: column;

					.location-text {
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
						line-height: 36rpx;
					}

					.positioning {
						margin-top: 18rpx;

						>text:first-of-type {
							font-size: 24rpx;
							color: #8a8a8a;
							margin-left: 10rpx;
						}

						>text:last-of-type {
							font-size: 24rpx;
							color: #333333;
							margin-left: 10rpx;
							border-bottom: 1rpx solid #333333;
						}
					}

					.detail-btn-row {
						width: 100%;
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.residue {
							display: flex;
							align-items: center;

							>image {
								width: 22rpx;
								height: 20rpx;
							}

							>text {
								font-size: 24rpx;
								color: #F4333C;
								margin-left: 6rpx;
							}
						}

						.price {
							font-size: 24rpx;
							font-weight: bold;
							color: #F4333C;
							margin-left: 10rpx;
						}

						.detail-btn {
							margin-left: 10rpx;
							background-color: #F4333C;
							color: #fff;
							height: 52rpx;
							width: 122rpx;
							font-size: 26rpx;
						}

						.u-hairline-border:after {
							border: none;
						}
					}
				}
			}

			.site-list-row:first-of-type {
				margin-top: 21rpx;
			}
		}
	}
</style>
